import { StyleSheet, Dimensions, Platform } from "react-native";

const { width, height } = Dimensions.get("window");
const isIOS = Platform.OS === "ios";

const styles = StyleSheet.create({
  container: {
    flex: 1,
    height: 45,
    justifyContent: "center",
    alignItems: "center",
    paddingHorizontal: 5,
  },
  recordingContainer: {
    width: width * 0.38,
    height: width * 0.42,
    backgroundColor: "rgba(0, 0, 0, 0.8)",
    borderRadius: 12,
    justifyContent: "flex-start",
    alignItems: "center",
    paddingTop: 24,
    shadowColor: "#000",
    shadowOffset: { width: 0, height: 4 },
    shadowOpacity: 0.5,
    shadowRadius: 6,
    elevation: 10,
    position: "absolute",
    bottom: 60, // 将录音容器定位在底部任务栏上方
    left: "30%", // 水平居中定位
    zIndex: 999,
  },
  micIcon: {
    marginBottom: 24,
  },
  cancelHint: {
    position: "absolute",
    bottom: 60, // 显示在输入栏上方
    left: 0,
    right: 0,
    textAlign: "center",
    color: "#fff",
    fontSize: 14,
    fontWeight: "500",
    zIndex: 1000,
  },
  cancelContainer: {
    width: width * 0.38,
    height: width * 0.42,
    backgroundColor: "rgba(212, 48, 48, 0.9)",
    borderRadius: 8,
    justifyContent: "flex-start",
    alignItems: "center",
    paddingTop: 24,
    shadowColor: "#000",
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.3,
    shadowRadius: 4,
    elevation: 5,
    position: "absolute",
    bottom: 60, // 显示在输入栏上方
    left: "30%", // 水平居中
    zIndex: 999,
  },
  cancelIconContainer: {
    width: 68,
    height: 68,
    borderRadius: 34,
    backgroundColor: "#fff",
    justifyContent: "center",
    alignItems: "center",
    marginBottom: 20,
    shadowColor: "#000",
    shadowOffset: { width: 0, height: 1 },
    shadowOpacity: 0.2,
    shadowRadius: 2,
  },
  cancelText: {
    color: "#fff",
    fontSize: 16,
    fontWeight: "normal",
  },
  voiceWaveContainer: {
    flexDirection: "row",
    justifyContent: "center",
    alignItems: "flex-end",
    height: 40,
    marginBottom: 20,
    width: "60%",
  },
  voiceWaveLine: {
    width: 4,
    backgroundColor: "#1AAD19",
    marginHorizontal: 2,
    borderRadius: 2,
  },
  timerText: {
    color: "#fff",
    fontSize: 16,
  },
  button: {
    height: 45,
    width: "100%",
    borderRadius: 5,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#f7f7f7",
    borderWidth: 0.5,
    borderColor: "#ddd",
  },
  buttonPressed: {
    backgroundColor: "#e0e0e0",
    borderColor: "#1AAD19",
    borderWidth: 1,
  },
  buttonText: {
    fontSize: 16,
    color: "#333",
    fontWeight: "500",
  },
  releaseText: {
    color: "#fff",
    fontSize: 13,
    marginTop: 10,
  },
  overlay: {
    position: "absolute",
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    backgroundColor: "rgba(0, 0, 0, 0.5)",
    zIndex: 998,
  },

  // 预览模式相关样式
  previewContainer: {
    flex: 1,
    flexDirection: "row",
    alignItems: "center",
    backgroundColor: "#f0f0f0",
    borderRadius: 5,
    paddingHorizontal: 10,
    height: 45,
  },
  previewPlayButton: {
    width: 30,
    height: 30,
    borderRadius: 15,
    backgroundColor: "#fff",
    justifyContent: "center",
    alignItems: "center",
    marginRight: 10,
  },
  previewDuration: {
    fontSize: 14,
    color: "#555",
    flex: 1,
  },
  previewActions: {
    flexDirection: "row",
  },
  actionButton: {
    paddingHorizontal: 10,
  },
  actionText: {
    fontSize: 14,
    color: "#1AAD19",
  },
  cancelActionText: {
    color: "#E45454",
  },
});

export default styles;
